<template>
  <div class="radar-view chart-container">
    <div class="chart-item" v-for="(chart, index) in chartComponents" :key="chart.name" @click="openChartPreview(chart.component)">
      <component :is="chart.component" />
      <h3>{{ index + 1 }}. {{ chart.label || '雷达图' }}</h3>
    </div>
  </div>
  <ChartPreview ref="chartPreviewRef" />
</template>

<script setup>
import { ref } from 'vue';
import ChartPreview from '@/components/chartPreview.vue';
import RadarChart01 from './components/radarChart01.vue';
import RadarChart02 from './components/radarChart02.vue';
import RadarChart03 from './components/radarChart03.vue';
import RadarChart04 from './components/radarChart04.vue';

const chartComponents = [
  { name: 'RadarChart01', component: RadarChart01, label: '雷达图' },
  { name: 'RadarChart02', component: RadarChart02, label: '雷达图' },
  { name: 'RadarChart03', component: RadarChart03, label: '雷达图' },
  { name: 'RadarChart04', component: RadarChart04, label: '雷达图' },
];

const chartPreviewRef = ref(null);
const openChartPreview = (component) => {
  chartPreviewRef.value.open(component);
};
</script>

<style scoped></style>
